/*
 * @ddescription: 企业后台商品订单列表/自营订单列表
 * @Author: along
 * @Date: 2020-10-27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-10 11:30:31
 */
<template>
    <div class="orderSelfList">
        <div class="order_header">
            <div
                class="order_nav"
            >
                <div
                    v-for="(title,index) in tableHeader"
                    :key="index"
                    class="order_title"
                    :class="'header'+ index"
                    :style="{
                        width: index == 0 ? '372px' : (index == 1 || index == 2 || index == 3 ? '150px' : 'auto'), minWidth: index == 4 || index == 5 || index == 6 ? '150px' : '', flex: index == 0 || index == 1 || index == 2 || index == 3 ? 'none' : '1', paddingLeft: '0px', paddingRight: '0px', textAlign: 'center'
                    }"
                >
                    {{ title }}
                </div>
            </div>
        </div>
        <div class="order_self">
            <div
                class="order_wrap"
                v-if="table.length > 0"
            >
                <div
                    v-for="(row,index) in table"
                    :key="index"
                    class="order_list"
                    :style="{minWidth: '1274px'}"
                >
                    <!-- 订单信息 -->
                    <div class="order_data">
                        <div class="order_info">
                            <p class="order_category">
                                {{ row.order_category | filterCategory }}
                            </p>
                            <p class="order_no">
                                订单编号: {{ row.order_no ? row.order_no : '--' }}
                            </p>
                            <p class="order_time">
                                下单时间: {{ row.create_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                            </p>
                        </div>
                        <div class="order_detail_wrap">
                            <!-- <div
                                v-if="row.status == 3"
                                class="order_detail"
                                @click="reissue(row)"
                            >
                                补发
                            </div> -->
                            <div
                                class="order_detail"
                                @click="shopRemark(row)"
                                :style="{marginLeft: '24px'}"
                            >
                                备注
                            </div>
                            <div
                                class="order_detail"
                                @click="checkDetail(row)"
                                :style="{marginLeft: '24px'}"
                            >
                                查看详情
                            </div>
                        </div>
                    </div>

                    <!-- 商品数据列表 -->
                    <div class="order_content orderHeight">
                        <div
                            class="order_side"
                            data-info="商品信息"
                            :style="{width: '372px', flex: 'none', alignItems: 'flex-start'}"
                        >
                            <div
                                v-for="(option, idx) in row.buy_student_list"
                                :key="idx"
                                class="order_side_info_fatch"
                            >
                                <div
                                    v-for="(item, key) in option.order_item_list"
                                    :key="key"
                                    class="order_side_info"
                                >
                                    <img
                                        :src="item.goods_info.thumb_pic"
                                        class="order_cover"
                                        @click="fnPreviewimg(item.goods_info.thumb_pic)"
                                    >
                                    <div class="order_product">
                                        <p
                                            v-if="item.goods_info.title"
                                            class="order_title"
                                        >
                                            {{ item.goods_info.title }}
                                        </p>
                                        <p
                                            v-if="item.goods_product_info.goods_specs.length > 0"
                                            class="order_spec"
                                        >
                                            {{ item.goods_product_info.goods_specs | filterSpec }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="order_side no-padding"
                            data-info="学生价"
                            :style="{width: '150px', flex: 'none'}"
                        >
                            <div
                                v-for="(option, idx) in row.buy_student_list"
                                :key="idx"
                                class="order_side_info_fatch"
                            >
                                <div
                                    v-for="(item, key) in option.order_item_list"
                                    :key="key"
                                    class="order_side_info"
                                >
                                    {{ item.price ? '¥' + item.price : '--' }}
                                </div>
                            </div>
                        </div>
                        <div
                            class="order_side"
                            data-info="购买数量"
                            :style="{width: '150px', flex: 'none'}"
                        >
                            <div
                                v-for="(option, idx) in row.buy_student_list"
                                :key="idx"
                                class="order_side_info_fatch"
                            >
                                <div
                                    v-for="(item, key) in option.order_item_list"
                                    :key="key"
                                    class="order_side_info"
                                >
                                    {{ item.num ? item.num + '件' : '--' }}
                                </div>
                            </div>
                        </div>
                        <div
                            class="order_side"
                            data-info="售后类型"
                            :style="{width: '150px', flex: 'none'}"
                        >
                            <div
                                v-for="(option, idx) in row.buy_student_list"
                                :key="idx"
                                class="order_side_info_fatch"
                            >
                                <div
                                    v-for="(item, key) in option.order_item_list"
                                    :key="key"
                                    class="order_side_info"
                                >
                                    {{ item.cancel_apply_info.type == 1 ? '仅退款' : (item.cancel_apply_info.type == 2 ? '退货退款' : (item.cancel_apply_info.type == 3 ? '换货' : '--')) }}
                                </div>
                            </div>
                        </div>
                        <div
                            class="order_side"
                            data-info="买家信息"
                            :style="{minWidth: '150px', flex: '1'}"
                        >
                            <div
                                v-for="(option, idx) in row.buy_student_list"
                                :key="idx"
                                class="order_side_info_fatch order_side_bottom"
                                :style="{height: option.order_item_list.length * 132 + 'px'}"
                            >
                                <p class="order_side_name">
                                    {{ option.true_name ? option.true_name : '--' }}
                                </p>
                                <p class="order_side_phone">
                                    {{ option.phone ? option.phone : '--' }}
                                </p>
                            </div>
                        </div>
                        <div
                            class="order_side"
                            data-info="实际入账金额"
                            :style="{minWidth: '150px', flex: '1', justifyContent: 'center'}"
                        >
                            <div
                                class="order_side_info_fatch order_side_bottom"
                                :style="{height: row.length * 132 + 'px'}"
                            >
                                <p :style="{color: '#EE4E59', fontSize: '14px', fontWeight: '500'}">
                                    {{ row.hire_get_money ? '¥' + row.hire_get_money : '--' }}
                                </p>
                                <p :style="{color: '#333333', fontSize: '14px', marginTop: '10px'}">
                                    (含运费{{ row.freight ? '¥' + row.freight : '--' }})
                                </p>
                            </div>
                        </div>
                        <div
                            class="order_side"
                            data-info="订单状态"
                            :style="{minWidth: '150px', flex: '1'}"
                        >
                            <div class="order_side_info_fatch">
                                <p
                                    v-if="row.status == 0"
                                    :style="{color: '#FF8E39', fontSize: '14px', fontWeight: '500'}"
                                >
                                    待支付
                                </p>
                                <p
                                    v-if="row.status == 1"
                                    :style="{color: '#FF3030', fontSize: '14px', fontWeight: '500'}"
                                >
                                    未成团,不可发货
                                </p>
                                <div
                                    v-if="row.status == 2"
                                    class="order_cloum"
                                >
                                    <p :style="{color: '#FF8E39', fontSize: '14px', fontWeight: '500'}">
                                        待发货
                                    </p>
                                    <p
                                        class="order_cloumn_button"
                                        @click="confirmSendGoods(row)"
                                    >
                                        确认发货
                                    </p>
                                </div>
                                <p
                                    v-if="row.status == 3"
                                    :style="{color: '#FF8E39', fontSize: '14px', fontWeight: '500'}"
                                >
                                    待收货
                                </p>
                                <p
                                    v-if="row.status == 4"
                                    :style="{color: '#54BEC4', fontSize: '14px', fontWeight: '500'}"
                                >
                                    已完成
                                </p>
                                <p
                                    v-if="row.status == -1"
                                    :style="{color: '#333333', fontSize: '14px', fontWeight: '500'}"
                                >
                                    已关闭
                                </p>
                                <p
                                    v-if="row.status == -11"
                                    :style="{color: '#333333', fontSize: '14px', fontWeight: '500'}"
                                >
                                    预期未处理
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 备注 -->
                    <div class="order_remark">
                        <div class="order_remark_left">
                            买家备注:
                            <p>{{ row.student_remark ? row.student_remark : '--' }}</p>
                        </div>
                        <div class="order_remark_right">
                            商家备注:
                            <p>{{ row.remark ? row.remark : '--' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div
                v-else
                class="order_wrap no-data"
            >
                暂无数据
            </div>
        </div>

        <!-- 发货弹窗 -->
        <logistics-delivery
            ref="logisticsDelivery"
            @update="update"
        />

        <!-- 设置备注 -->
        <order-remark
            ref="orderRemark"
            @update="update"
        />

        <!-- 图片预览 -->
        <img-preview
            ref="imgPreview"
        />
    </div>
</template>

<script>
import logisticsDelivery from '@/components/manage/market/logistics-delivery.vue';
import orderRemark from '@/components/manage/market/order-remark.vue';
import imgPreview from '@/components/common/img-preview';
export default {
    name: 'OrderSelf',
    props: {
        table: {
            type: Array,
            default: () => {}
        }
    },
    components: {
        logisticsDelivery,
        imgPreview,
        orderRemark
    },
    data () {
        return {
            tableHeader: ['商品信息','学生价','购买数量','售后类型','买家信息','实际入账金额','订单状态'],
        };
    },
    watch: {
        table: {
            handler: function (val, oldVal) {},
            deep: true
        }
    },
    filters: {
        filterCategory (val) {
            if(val === 0) return '一般订单';
            if(val === 1) return '抢购订单';
            if(val === 2) return '核销订单';
            if(val === 4) return '一般订单';//特殊处理
            if(val === 3) return '折扣订单';
            if(val === 5) return '0元购';
            if(val === 6) return '砍价订单';
            if(val === 7) return '团购订单';
            if(val === 8) return '一般订单';
            if(val === 9) return '会员0元购';
            if(val === 10) return '虚拟订单';
        },
        filterSpec (val) {
            let str = '';

            val.forEach(element => {
                str += element.spec_name + ';' + element.spec_value + ';';
            });

            return str;
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.scrollAnsync();
        },

        /**
         * @description 查看详情
         */
        checkDetail (row) {
            this.$router.push({
                name: 'orderListDetail',
                query: {
                    no: row.order_no
                }
            });
        },

        /**
         * @description 商品备注
         */
        shopRemark (row) {
            this.$refs.orderRemark.show(row.order_no);
        },

        // /**
        //  * @description 补发
        //  */
        // reissue (row) {
        //     this.$post('/__student/ShopGoodsOrder/get', {
        //         order_no: row.order_no
        //     }).then(resp => {
        //         if (resp.code == 1) {
        //             this.$refs.logisticsDelivery.setData({
        //                 order_no: row.order_no,
        //                 user_name: resp.data.address_info.user_name,
        //                 phone: resp.data.address_info.phone,
        //                 detail_info: resp.data.address_info.province_name + resp.data.address_info.city_name + resp.data.address_info.county_name +resp.data.address_info.detail_info,
        //             });
        //             this.$refs.logisticsDelivery.show('2');
        //         } else {
        //             this.$notify({
        //                 title: '警告',
        //                 message: resp.msg,
        //                 duration: 2000,
        //                 type: 'warning'
        //             });
        //         }
        //     });
        // },

        /**
         * @description 确定发货
         */
        confirmSendGoods (row) {
            this.$post('/__student/ShopGoodsOrder/get', {
                order_no: row.order_no
            }, resp => {
                if (resp.code == 1) {
                    this.$refs.logisticsDelivery.setData({
                        order_no: row.order_no,
                        user_name: resp.data.address_info.user_name,
                        phone: resp.data.address_info.phone,
                        detail_info: resp.data.address_info.province_name + resp.data.address_info.city_name + resp.data.address_info.county_name +resp.data.address_info.detail_info,
                    });
                    this.$refs.logisticsDelivery.show('1');
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 图片预览
         */
        fnPreviewimg (url) {
            this.$refs.imgPreview.show([
                url
            ], 0);
        },

        /**
         * @description 监听横向滚动,触发同步更新
         */
        scrollAnsync () {
            document.querySelector('.order_self').addEventListener('scroll', e => {
                document.querySelector('.order_header').scrollLeft = e.target.scrollLeft > 100 ? e.target.scrollLeft + 3 : e.target.scrollLeft;
            },false);

            document.querySelector('.order_header').addEventListener('scroll', e => {
                document.querySelector('.order_self').scrollLeft = e.target.scrollLeft > 100 ? e.target.scrollLeft - 3 : e.target.scrollLeft;
            },false);
        },

        /**
         * @description 更新列表数据
         */
        update () {
            this.$emit('update');
        }
    }
};
</script>

<style lang="less" scoped>
.orderSelfList {
    width: 100%;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    // nav
    .order_header {
        width: 100%;
        height: 44px;
        margin-bottom: 12px;
        background: #F2F2F2;
        overflow: auto;
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .order_nav {
            width: auto;
            height: 44px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            .order_title {
                color: #333;
                font-size: 14px;
                font-weight: 500;
                box-sizing: border-box;
                white-space: nowrap;
                // border-left: 1px red solid;
            }
        }
    }
    // table
    .order_self {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        // border: 1px red solid;
        &::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }
        .no-data {
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            border: 1px #EEE solid;
        }
        .order_wrap {
            flex: 1;
            width: 100%;
            .order_list {
                background: #FBFBFB;
                border-radius: 2px;
                border: 1px #EEEEEE solid;
                // border-bottom: none;
                margin-top: 12px;
                // 订单信息
                .order_data {
                    width: calc(100% - 48px);
                    height: 44px;
                    margin-left: 24px;
                    margin-right: 24px;
                    box-sizing: border-box;
                    border-bottom: 1px #EEEEEE solid;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .order_info {
                        display: flex;
                        align-items: center;
                        .order_category {
                            width: 64px;
                            height: 20px;
                            text-align: center;
                            line-height: 20px;
                            white-space: nowrap;
                            overflow: hidden;
                            color: #F2F2F2;
                            border-radius: 2px;
                            background: #FF8E39;
                            font-size: 12px;
                            margin-right: 12px;
                        }
                        .order_no {
                            color: #333;
                            font-size: 12px;
                        }
                        .order_time {
                            color: #333;
                            font-size: 12px;
                            margin-left: 32px;
                        }
                    }
                    .order_detail_wrap {
                        display: flex;
                        align-items: center;
                        .order_detail {
                            width: 68px;
                            height: 26px;
                            cursor: pointer;
                            text-align: center;
                            line-height: 26px;
                            border-radius: 13px;
                            color: #333;
                            font-weight: 500;
                            font-size: 12px;
                            border: 1px #D7D7D7 solid;
                            margin-left: 44px;
                        }
                    }
                }

                //备注
                .order_remark {
                    width: calc(100% - 48px);
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    border-top: 1px #EEEEEE solid;
                    .order_remark_left {
                        margin-left: 24px;
                        display: flex;
                        align-items: center;
                        color: #333;
                        font-size: 12px;
                        font-weight: 500;
                        &>p {
                            color: #333;
                            font-size: 12px;
                            font-weight: 400;
                            margin-left: 5px;
                            max-width: 400px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    .order_remark_right {
                        margin-right: 24px;
                        display: flex;
                        align-items: center;
                        color: #333;
                        font-size: 12px;
                        font-weight: 500;
                        &>p {
                            color: #333;
                            font-size: 12px;
                            font-weight: 400;
                            margin-left: 5px;
                            max-width: 400px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }

                //内容
                .order_content {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    .order_view {
                        margin: 16px 0;
                        display: flex;
                        align-items: center;
                        height: 100px;
                        box-sizing: border-box;
                        padding-left: 40px;
                        border-right: 1px #EEEEEE solid;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #333333;
                        font-weight: 500;
                        flex: 1;
                        padding: 0 40px;
                        box-sizing: border-box;
                        min-width: 141px;
                        .order_cloum {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            .order_cloum_name {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 120px;
                            }
                            .order_cloum_phone {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                margin-top: 10px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 120px;
                            }
                            .order_money {
                                color: #EE4E59;
                                font-size: 14px;
                                font-weight: 500;
                            }
                            .order_freight {
                                color: #333333;
                                font-size: 14px;
                                margin-top: 10px;
                            }
                            .order_cloumn_button {
                                width: 100px;
                                height: 30px;
                                color: #ffffff;
                                text-align: center;
                                line-height: 30px;
                                font-size: 12px;
                                margin-top: 12px;
                                cursor: pointer;
                                background: #20A0FF;
                                border-radius: 15px;
                            }
                        }
                        .order_cover {
                            width: 100px;
                            height: 100px;
                            margin-right: 10px;
                        }
                        .order_product {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            .order_title {
                                width: 198px;
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 20px;
                                overflow : hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                margin-bottom: 19px;
                                white-space: normal;
                            }
                            .order_spec {
                                height: 16px;
                                width: 198px;
                                line-height: 16px;
                                color: #666;
                                font-size: 12px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                    .order_side {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        align-items: center;
                        border-right: 1px #EEEEEE solid;
                        height: 100%;
                        // padding: 0 40px;
                        .order_side_info_fatch {
                            width: 100%;
                            box-sizing: border-box;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                        }
                        .order_side_bottom {
                            border-bottom: 1px #EEEEEE solid;
                            .order_side_name {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                width: 150px;
                                line-height: 22px;
                                text-align: center;
                                overflow: hidden;
                                padding: 0 12px;
                            }
                            .order_side_phone {
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                margin-top: 10px;
                            }
                        }
                        .order_side_info {
                            width: 100%;
                            display: flex;
                            height: 132px;
                            align-items: center;
                            justify-content: center;
                            box-sizing: border-box;
                            border-bottom: 1px #EEEEEE solid;
                            font-weight: 500;
                            .order_cover {
                                width: 100px;
                                height: 100px;
                                margin-right: 10px;
                            }
                            .order_product {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                .order_title {
                                    width: 222px;
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    line-height: 20px;
                                    overflow : hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    margin-bottom: 19px;
                                    white-space: normal;
                                    padding-right: 24px;
                                }
                                .order_spec {
                                    height: 16px;
                                    width: 222px;
                                    line-height: 16px;
                                    color: #666;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    padding-right: 24px;
                                }
                            }
                        }
                        .order_cloum {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            .order_cloumn_button {
                                width: 100px;
                                height: 30px;
                                color: #ffffff;
                                text-align: center;
                                line-height: 30px;
                                font-size: 12px;
                                margin-top: 12px;
                                cursor: pointer;
                                background: #20A0FF;
                                border-radius: 15px;
                            }
                        }
                        .order_side_info_fatch:last-child .order_side_info:last-child {
                            border-bottom: none;
                        }
                        .order_side_bottom:last-child {
                            border-bottom: none;
                        }
                    }
                    .no-padding {
                        padding: 0;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.orderSelfList {
    .el-dialog__body {
        padding-left: 64px;
        padding-right: 64px;
    }
}
</style>